<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webgl</title>
</head>

<style>
  #myDiv {
    /* background-color: #ccc; */
    display: flex;
  }

  #flexBox {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .item {
    width: calc(50% - 10px);
    text-align: center;
    justify-items: center;
    border: 1px solid #ccc;
  }

  #canvas {
    background-color: #ccc;
    /* height: 1000px; */
  }
</style>

<body>
  <div id="myDiv">
    <div id="flexBox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>

    </div>

    <canvas id="canvas" width="600" height="600">
    </canvas>


  </div>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image()
    img.src = './1.jpg'
    img.onload = () => {
      ctx.drawImage(img, 0, 0)
      //绘制文字 文字在图片上面
      ctx.font = '20px Arial';
      ctx.fillStyle = 'red';
      ctx.fillText('hello world', 100, 100);

      // ctx.fillText('hello world', 100, 100, 200, 200);
    }


    canvas.addEventListener('click', function (e) {
      console.log(e);
      // 获取鼠标点击的位置
      var x = e.clientX;
      var y = e.clientY;
      // 判断鼠标点击的位置是否在文字上
      // if (ctx.isPointInPath(x, y)) {
      //   alert('You clicked the text!');
      // }
    });

  </script>

</body>

</html>